<template>
  <div class="RentalDetails">
    <div class="demo-nav">
      <div class="demo-nav__title">商品详情</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
      <van-icon @click="share('weixin')" class="demo-nav__right" name="share-o" size="20" color="#000000"/>
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.rentalPic.rentalUrl"/>
      </van-swipe-item>
    </van-swipe>
    <div class="RentalDetails-details-a" align="left">
      <p style="font-size: 1rem">{{this.rental.rentalName}}</p>
    </div>
    <div class="RentalDetails-details-b">
      <van-row>
        <van-col span="18" style="text-align: left">
          <p style="color: red;font-size:1.2rem">￥{{this.rental.rentalPrice}}元<span style="color: black;font-size: 0.5rem"></span></p>
        </van-col>
      </van-row>
    </div>
    <van-divider/>
    <div class="RentalDetails-details-c" align="left">
      <p style="font-size: 1rem"><van-icon name="balance-o"  size="16"/>商家已缴纳{{this.rental.balanceMoney}}元诚信金作为<br/>所售商品及服务的质量担保金</p>
      <van-row type="flex">
        <van-col span="6"><van-icon size="14" name="passed" color="blue"/>质量保障</van-col>
        <van-col span="6"><van-icon name="passed" color="blue"/>优质服务</van-col>
        <van-col span="10"><van-icon name="passed" color="blue"/>售后无忧</van-col>
      </van-row>
    </div>
    <van-divider/>
    <div style="" class="RentalDetails-details-f">
      <van-row @click="guige">
        <van-col span="4">请选择</van-col>
        <van-col span="15"  style="text-align: left" >选择 规格</van-col>
        <van-col span="3"><van-icon name="arrow" size="14" style="position: absolute;right: 1rem;"/></van-col>
      </van-row>
    </div>
    <van-divider/>
    <div class="RentalDetails-details-i" align="center" style="margin-bottom: 60px">
      <h1 style="font-size: 1.3rem">服务内容</h1>
      <br>
      <P style="font-size: 1rem;text-align: left">{{rental.descript}}</P>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服">
        <a :href="'tel:' + rental.supplierInfo.phoneNumber" rel="external nofollow" ><span style="color: black">客服</span>  </a>
      </van-goods-action-icon>
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>

    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota="quota"
      :quota-used="quota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      :show-add-cart-btn="false"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->

  </div>
</template>

<script>

  import { Toast } from 'vant';
  import {
    selectRentalServiceById,
    insertOrderMaster,
    insertOrderDetail
  } from '@/api/constructionTeam/rental.js'

  export default {
    name: "RentalDetails",
    data(){
      return{
        images: [

        ],
        current: 0,
        rental :Object,
        show: false,
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [
            {
              k: '规格',
              k_s: 's1',
              v: [],
            },
          ],
          // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
          list: [],
          price: '',  //？？
          stock_num: 9999, // 商品总库存？？
          none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
          hide_stock: true,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
        },
        initialSku:{
          // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
          // 值：skuValueId（规格值 id）
          s1: '1',
          // 初始选中数量
          selectedNum: 1,
        },
        goods_id: '',
        // quota: 3, //限购数量 库存旁边显示限购数
        quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
        goods_info: {
          title: '',
          picture:''  //图片这个我有点混乱
          // picture:this.a
        },
        showBase: true,    //sku的框的显示
        showCustom: false,
        showStepper: false,
        showSoldout: false,
        closeOnClickOverlay: true,  //点击空白处关闭购物框
        // 订单表门店配送表单
        formMaster:{},
        // 订单详情表表单
        formDetail:{},
        rentalId:'',
        buttons: [{
          title: '我的好友',
          extra: {
            scene: 'WXSceneSession'
          }
        },
          {
            title: '朋友圈',
            extra: {
              scene: 'WXSceneTimeline'
            }
          },
        ],
      }
    },
    created() {
      let id = parseInt(this.$route.query.rentalId);
      this.rentalId = id;
      this.getRentalById(id);
    },
    mounted() {
      if(window.plus) {
        this.updateSerivces();
      }
    },
    methods:{

      /**
       * 获取微信分享通道
       */
      updateSerivces() {
        let _this = this;
        plus.share.getServices(function (s) {
          _this.shares = {};
          for (var i in s) {
            var t = s[i];
            _this.shares[t.id] = t;
          }
          _this.sweixin = _this.shares['weixin'];
          _this.sqq = _this.shares['qq'];
          _this.sinaweibo = _this.shares['sinaweibo'];
        }, function (e) {
          plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
        });
      },


      //第三方分享
      share(a) {
        let _this = this;

        if(a == 'weixin'){
          let msg = {
            type: 'web', //分享的内容的类型
            title: '淘小建自建房平台美图太赞了,分享给你',
            content: this.rental.rentalName,
            thumbs: [this.rental.rentalUrlAl],
            href: 'http://51jhf.com/txj/#/RentalDetails?rentalId='+this.rentalId,
            extra: {
              scene: "WXSceneSession"
            } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
          }
          plus.nativeUI.actionSheet({
            title: '分享到微信',
            cancel: '取消',
            buttons: _this.buttons,
          }, function (e) {
            (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
          })
        }
      },

      /**
       * 触发分享
       */
      sharePage(srv, msg, button) {
        let _this = this;
        // plus.nativeUI.alert('分享操作：');
        if (!srv) {
          plus.nativeUI.alert('无效的分享服务！');
          return;
        }
        button && (msg.extra = button.extra);
        // 发送分享
        if (srv.authenticated) {
          // plus.nativeUI.alert('---已授权---');
          _this.doShare(srv, msg);
        } else {
          // plus.nativeUI.alert('---未授权---');
          srv.authorize(function () {
            _this.doShare(srv, msg);
          }, function (e) {
            plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
          });
        }
      },

      /**
       * 开始分享
       */
      doShare(srv, msg) {
        let _this = this;
        srv.send(msg, function () {
          plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
        }, function (e) {
          plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
        });
      },


      toBack(){
        this.$router.go(-1);//返回上一层
      },
      getRentalById(rentalId){
        selectRentalServiceById(rentalId).then((res) => {
          console.log(res.data.rentalLabel);
          this.rental = res.data.rentalService;
          this.images = res.data.rentalLabel;
          this.goods_info.picture= res.data.rentalService.rentalUrlAl;

          console.log("***images***"+JSON.stringify(res.data))
          for (let i = 0; i < res.data.rentalLabel.length; i++){
            this.sku.tree[0].v.push({ "id": res.data.rentalLabel[i].labelId,"name":res.data.rentalLabel[i].labelName,"imgUrl":res.data.rentalLabel[i].rentalPic.rentalUrl});
            this.sku.list.push({ "id": null,"price":(res.data.rentalLabel[i].labelPrice)*100,"discount":null,
              "s1":res.data.rentalLabel[i].labelId,"stock_num":9999,"goods_id":res.data.rentalLabel[i].rentalId});
            this.goods_id = res.data.rentalLabel[i].rentalId;
          }
        })
      },
      customSkuValidator(){

      },
      onBuyClicked(sku) {
        console.log("*************"+JSON.stringify(sku.selectedNum));
        var shu = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
        var zuizhong = shu*sku.selectedNum;
        console.log("********"+zuizhong);
        this.formMaster.orderMoney = zuizhong;
        this.formMaster.paymentMoney = zuizhong;
        insertOrderMaster(this.formMaster).then((res) =>{
          console.log(res.data);
          this.formDetail.orderId = res.data.data;
          this.formDetail.productName = this.rental.rentalName;
          this.formDetail.productCnt = JSON.stringify(sku.selectedNum);
          this.formDetail.productPrice = zuizhong;
          insertOrderDetail(this.formDetail).then((res2) =>{
            console.log(res2.data);
            if(res2.data.code == 200){
              this.$router.push({
                path:"/MaterialPay",
                query:{
                  orderId:res.data.data,
                  totalPrice:zuizhong,
                  supplierId:this.rental.supplierInfo.supplierId
                }});
            }
          })
        })
        // this.$router.push({path:"/OrderDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
        // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
      },
      onAddCartClicked(sku) {
        this.$toast('add cart:' + JSON.stringify(sku));
      },

      // 立即购买
      onClickButton() {
        this.show = true;
      },
      guige(){
        this.show = true;
      }
    },
  }
</script>

<style scoped>
  .RentalDetails{
    color: black;
  }
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .demo-nav__right{
    position: absolute;
    top: 18px;
    right: 16px;
  }
  .RentalDetails-details-a{
    padding: 0.5rem 1rem;
  }
  .RentalDetails-details-a p{
    font-size: 0.8rem;
  }
  .RentalDetails-details-b{
    padding: 0 1rem;
  }
  .RentalDetails-details-c{
    padding: 0.3rem 1rem;
  }
  .RentalDetails-details-c p{
    font-size: 0.75rem;
    padding: 0.2rem 0;
  }
  .RentalDetails-details-f{
    padding: 0.3rem 1rem;
    font-size: 1rem;
    position: relative
  }
  .RentalDetails-details-i{
    padding: 0.3rem 1rem;
  }
  .RentalDetails-details-i p{
    font-size: 0.6rem;
  }
</style>
